<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <script>
// 定义Vue内部的实现
function Vue(options) {
  // 将options中的data保存到Vue实例的_data上
  this._data = options.data

  // 通过defineProperty给vue实例添加data中有所有属性
  // 遍历data中的所有属性, 分别去实现数据代理
  Object.keys(this._data).forEach(key => { // key就是msg/msg2
    // 给vue实例添加带getter和setter的属性
    Object.defineProperty(this, key, {
      // 在getter中: 读取并返回data对象中对应的属性值
      get () {
        console.log('getter')
        return this._data[key]
      },
      // 在setter中: 将最新的值保存到data对象的对应属性上
      set (value) {
        console.log('setter')
        this._data[key] = value
      }
    })
  })
}
  </script>

  <script>
    // 测试使用
    const vue = new Vue({
      data: {
        msg: 'abc',
        msg2: 'atguigu'
      }
    })
    console.log(vue)
    console.log(vue._data)
    console.log(vue.msg)  // 触发getter   代理读
    vue.msg = 'cba' // 触发setter  // 代理写
    console.log(vue.msg) // 触发getter  代理读
    console.log(vue._data.msg)

  </script>
</body>
</html>